/**
 * datalist.mjs - 数据列表组件
 * 实现了一个功能完整的数据列表组件，支持数据的展示和CRUD操作
 */

import { thin } from "../thin3.mjs";
import { confirm } from "./dialog.mjs";
import { nearest_data } from "./nearest.mjs";

/**
 * 数据列表模板函数 - 用于初始化数据列表
 * @param {HTMLElement} container - 容器元素
 * @param {Object} template - 列表模板配置
 */
export function datalist_template(container, template) {
  datalist({ ...template.datalist, ...{ container: container } });
}

/**
 * 数据列表主函数 - 创建并渲染数据列表
 * @param {Object} 配置参数
 * @param {string} id - 列表ID
 * @param {HTMLElement} container - 容器元素
 * @param {string} gridview_class - 表格视图样式类
 * @param {number} gridview_height - 表格高度
 * @param {string} title - 列表标题
 * @param {string} listapi - 列表数据API
 * @param {Object} listquery - 查询参数
 * @param {Array} listcols - 列配置
 * @param {string} groupdatapath - 分组数据路径
 * @param {Object} grouprowtemplate - 分组行模板
 * @param {boolean} rowedit - 是否允许行编辑
 * @param {boolean} rowselect - 是否允许行选择
 * @param {boolean} rowdrag - 是否允许行拖拽
 * @param {string} updateapi - 更新API
 * @param {string} insertapi - 插入API
 * @param {string} deleteapi - 删除API
 */
export function datalist({
  id,
  container,
  mode,
  gridview_class,
  gridview_height,
  gridview_rowclass,
  title,
  listapi,
  listquery,
  listcols,
  groupdatapath,
  grouprowtemplate,
  listdatapath,
  rowclick,
  rowedit = false,
  rowselect,
  rowdrag,
  rowinsert,
  rowdelete,
  rowchange,
  summarydatapath,
  itemapi,
  itemquery,
  linkfields = [],
  itemviewonopen,
  itemviewtitle = " ",
  itemviewwidth,
  itemviewheight,
  itemtemplate,
  onclose,
  // onitemviewclose,
  updateapi,
  insertapi,
  deleteapi,
  watch,
}) {
  let _data, cols;

  if (rowselect) {
    // 如果启用行选择，在列表开头添加复选框列

    cols = [
      {
        col: {
          input: "",
          type: "checkbox",
          class: "rowselect",
          event: {
            change: (e) => {
              selecthandler(e);
            },
          },
        },
        // 添加表头全选复选框
        filter: {
          input: "",
          type: "checkbox",
          class: "selectall",
          event: {
            change: (e) => {
              // 全选/取消全选处理
              thin("input.rowselect", container).each((node) => {
                node.checked = e.sender.checked;
              });
              selecthandler(e);
            },
          },
        },
        title: "",
        class: "fixed",
      },
      ...listcols,
    ];

    // listcols.unshift({
    //   col: {
    //     input: "",
    //     type: "checkbox",
    //     class: "rowselect",
    //     event: {
    //       change: (e) => {
    //         selecthandler(e);
    //       },
    //     },
    //   },
    //   // 添加表头全选复选框
    //   filter: {
    //     input: "",
    //     type: "checkbox",
    //     class: "selectall",
    //     event: {
    //       change: (e) => {
    //         // 全选/取消全选处理
    //         thin("input.rowselect", container).each((node) => {
    //           node.checked = e.sender.checked;
    //         });
    //         selecthandler(e);
    //       },
    //     },
    //   },
    //   title: "",
    //   class: "fixed",
    // });
  } else {
    cols = listcols;
  }

  /**
   * 行选择处理函数
   * @param {Event} e - 事件对象
   */
  function selecthandler(e) {
    // console.log({
    //   selecthandle: e,
    //   container,
    //   data: e.sender.closest("ajax").thin_data,
    // });
    let data = e.sender.closest("ajax").thin_data;

    if (typeof rowselect === "function") {
      let selected = [];
      thin("input.rowselect", container).each((node) => {
        if (node.checked) selected.push(node.closest("tr").thin_data);
      });
      // console.log(selected);
      rowselect(selected, data?.pagenum);
    }
  }

  if (rowdrag) {
    // listcols.push({
    //   col: {
    //     span: "=",
    //     click: (e) => {
    //       console.log(e);
    //       let tr = e.sender.closest("tr");
    //       tr.setAttribute("draggable", true);
    //     },
    //   },
    //   readonly: true,
    //   class: "fixright",
    // });
  }

  console.log({ mode });
  thin(container).render([
    // thin_render(container, [
    { h2: title, when: title },
    {
      button: "add", // 添加新数据按钮
      click: (e) => {
        console.log(e);
        itemviewer({
          // listquery,
          mode: "insert",
          onclose: () => {
            e.done();
          },
        });
      },
      when: insertapi && !rowinsert, // 仅当配置了insertapi且未启用行内插入时显示
    },
    {
      ajax: listapi, // 数据列表的AJAX请求配置
      query: listquery,
      loading: "loading....",
      watch, // 监听数据变化
      success: [
        {
          // gridview: listcols, // 表格视图配置
          gridview: cols,
          id: id,
          mode: mode,
          class: gridview_class,
          height: gridview_height,
          groupdatapath: groupdatapath, // 分组数据路径
          grouprowtemplate: grouprowtemplate, // 分组行模板
          datapath: listdatapath, // 列表数据路径
          summarydatapath: summarydatapath, // 汇总数据路径
          rowclass: gridview_rowclass,
          rowedit: rowedit,
          rowdrag: rowdrag,
          rowinsert: rowinsert && insertapi ? insert_row : false, // 行内插入处理
          rowdelete: rowdelete && deleteapi ? delete_row : false, // 行删除处理
          rowchange: (e) => {
            // 行数据变更处理
            if (updateapi) {
              thin
                .ajax({
                  url: updateapi,
                  data: { ...listquery, ...e.org_data, ...e.new_data },
                })
                .done((d) => {});
            } else if (rowchange) {
              rowchange(e);
            }
          },
          rowclick:
            rowclick || itemtemplate
              ? (e) => {
                  if (rowclick) rowclick(e);
                  else if (itemtemplate) {
                    // 设置关闭回调
                    if (onclose)
                      e.onclose = function () {
                        console("onclose!");
                        onclose();
                      };
                    if (itemapi) {
                      // 构建查询参数
                      let query = { ...itemquery } || {};

                      // 处理关联字段
                      if (linkfields) {
                        linkfields.forEach((key) => {
                          if (e.org_data.hasOwnProperty(key)) {
                            query[key] = e.org_data[key];
                          }
                        });
                      }
                      console.log({ data: e.org_data, query, mode: "read" });
                      itemviewer({ data: e.org_data, query, mode: "read" });
                    } else {
                      // 直接使用行数据打开查看器
                      itemviewer({ data: e.org_data, mode: "read" });
                    }
                  }
                }
              : undefined,
        },
        {
          if: ({ container, data, param }) => {
            return data.totalrecord && data.pagesize;
          },
          then: {
            pager: true,
          },
        },
      ],
    },
  ]);

  /**
   * 删除行处理函数
   * @param {Object} p - 参数对象
   */
  function delete_row(p) {
    console.log(p);
    let data = { ...listquery, ...p.org_data };
    console.log({ data });
    confirm("是否删除数据？")
      .confirmed((d) => {
        console.log({ confirmed: d });
        thin.ajax({
          url: deleteapi,
          data: data,
          success: () => {
            p.done();
            p.rerender();
          },
        });
      })
      .cancelled(() => {
        p.done();
      });
  }

  /**
   * 插入行处理函数
   * @param {Object} p - 参数对象
   */
  async function insert_row(p) {
    console.log(p);
    let data = { ...listquery, ...p.org_data, ...p.new_data };
    console.log(data);

    // await thin.fetch({ url: insertapi, data: data }).then((r) => {
    //   p.done();
    //   p.rerender();
    // });

    thin.ajax({
      url: insertapi,
      data: data,
      success: () => {
        p.done();
        p.rerender();
      },
    });
  }

  /**
   * 项目查看器 - 处理数据的详细视图
   * @param {Object} param - 参数对象
   * @param {Object} param.query - 查询参数
   * @param {Object} param.data - 数据对象
   * @param {string} param.mode - 模式（read/edit/insert）
   * @param {Function} param.onclose - 关闭回调
   */
  function itemviewer({ query, data, mode, onclose }) {
    console.log({ query, data, mode, onclose });
    if (itemviewonopen) itemviewonopen({ query, data, mode });

    thin.pop({
      header: itemviewtitle,
      render: render,
      width: itemviewwidth || 960,
      height: itemviewheight || 700,
      onclose: () => {
        console.log("onclose!!!");
        thin("ajax", container).rerender();
        if (onclose) onclose();
      },
      data: data || query,
    });

    function render({ container, data }) {
      console.log({ container, data, itemapi });
      if (itemapi) {
        // 如果配置了itemapi，通过API获取详细数据
        console.log({ query });
        thin.ajax({
          url: itemapi,
          data: query,
          success: (data) => {
            render_with_data(data);
          },
        });
      } else if (data) {
        // 直接使用传入的数据渲染
        render_with_data(data);
      } else {
        // 没有数据时使用空对象
        render_with_data({});
      }

      function render_with_data(data) {
        if (itemtemplate) {
          // 渲染表单视图
          thin(container).render({
            formview: itemtemplate, // 使用配置的表单模板
            data, // 数据对象
            mode, // 模式：read/edit/insert
            allrequired: true,
            oninsert: insertapi ? update : undefined, // 插入处理
            onsave: updateapi ? update : undefined, // 保存处理
            ondelete: deleteapi ? deletehandler : undefined, // 删除处理
          });
        }

        // 更新数据处理函数
        function update(e) {
          // 合并查询参数和表单数据
          let data = {
            ...(itemquery || listquery),
            ...query,
            ...e.org_data,
          };
          console.log({ data, itemquery, listquery });
          thin
            .ajax({
              // 根据模式选择API
              url: mode === "insert" ? insertapi || updateapi : updateapi,
              data,
            })
            .done((data) => {
              e.readmode(); // 更新成功后切换到读取模式
            })
            .fail((err) => {
              // 错误处理
              console.log(err);
              alert(err.statusText.concat("\n\r", err.responseText));
            });
        }

        // 删除数据处理函数
        function deletehandler(e) {
          // 合并所有相关数据
          let data = { ...itemquery, ...listquery, ...query, ...e.org_data };
          thin.ajax({
            url: deleteapi,
            data,
            success: (data) => {
              thin.popclose(e.sender); // 删除成功后关闭弹窗
            },
          });
        }
      }
    }
  }
}
